<template>
  <div class="base-info-wrap">
    <el-form v-if="userType === 1"
             ref="adminForm"
             label-position="right"
             :rules="adminRules"
             :model="adminForm.company"
             label-width="120px">
      <div class="user-info">
        <el-form-item label="公司全称">
          <span>{{ basicInfo.name || "--" }}</span>
        </el-form-item>
        <el-form-item label="公司编号">
          <span>{{ code || "--" }}</span>
        </el-form-item>
        <el-form-item label="登录账号">
          <span>{{ `admin@${alias}` || "--" }}</span>
        </el-form-item>
        <el-form-item label="实名认证">
          <span>已认证 <i class="el-icon-success icon-color" /></span>
        </el-form-item>
        <el-form-item label="注册时间">
          <span>{{ basicInfo.createAt }}</span>
        </el-form-item>
        <el-form-item v-if="userType === 1"
                      label="绑定开放平台">
          <span v-if="openAccount">
            {{ openAccount }}
            <span class="primary_color"
                  @click="openPlatformBind">
              前往开放平台
              <icon-svg class-name="iconClass"
                        icon-name="chakan" />
            </span>
          </span>
          <div v-else>
            <el-button type="primary"
                       @click="openPlatformBind">去绑定</el-button>
            <div class="tips_sty">
              <icon-svg class-name="iconClass"
                        icon-name="jijiangguoqi" />
              没有绑定账号，需去开放平台进行绑定
            </div>
          </div>
        </el-form-item>
      </div>
      <div class="user-form">
        <div>
          <el-form-item label="公司网站">
            <el-input v-if="saveStatus"
                      v-model="adminForm.company.url"
                      :maxlength="50"
                      placeholder="请输入公司网站"
                      clearable />
            <span v-else>{{ basicInfo.url || '--' }}</span>
          </el-form-item>
          <el-form-item label="公司简称">
            <el-input v-if="saveStatus"
                      v-model="adminForm.company.abbr"
                      :maxlength="50"
                      placeholder="请输入公司简称"
                      clearable />
            <span v-else>{{ basicInfo.abbr || '--' }}</span>
          </el-form-item>
          <el-form-item label="所属行业">
            <el-input v-if="saveStatus"
                      v-model="adminForm.company.industry"
                      :maxlength="50"
                      placeholder="请输入所属行业"
                      clearable />
            <span v-else>{{ basicInfo.industry || '--' }}</span>
          </el-form-item>
          <el-form-item label="公司所在城市"
                        prop="address">
            <area-cascader v-if="saveStatus"
                           v-model="adminForm.company.address"
                           :props="props" />
            <span v-else-if="basicInfo.address && basicInfo.address.province">
              {{ basicInfo.address.province }}{{ basicInfo.address.city }}{{ basicInfo.address.district }}
            </span>
            <span v-else>--</span>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-if="saveStatus"
                      v-model="adminForm.company.contactName"
                      :maxlength="20"
                      placeholder="请输入联系人"
                      clearable />
            <span v-else>{{ basicInfo.contactName || '--' }}</span>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-if="saveStatus"
                      v-model="adminForm.company.contactMobile"
                      :maxlength="50"
                      placeholder="请输入联系电话"
                      clearable />
            <span v-else>{{ basicInfo.contactMobile || '--' }}</span>
          </el-form-item>
          <!-- <el-form-item label="公司logo">
            <nr-upload :limit="1"
                       :attaches="attaches"
                       :isLook="!saveStatus"
                       type="png"
                       @uploadSuccess="uploadSuccess" />
          </el-form-item> -->
        </div>
        <div>
          <el-form-item label="开户银行">
            <el-input v-if="saveStatus"
                      v-model="adminForm.company.bankName"
                      :maxlength="30"
                      placeholder="请输入开户银行"
                      clearable />
            <span v-else>{{ basicInfo.bankName || '--' }}</span>
          </el-form-item>
          <el-form-item label="银行账号">
            <el-input v-if="saveStatus"
                      v-model="adminForm.company.bankAccount"
                      :maxlength="20"
                      placeholder="请输入银行账户"
                      clearable />
            <span v-else>{{ basicInfo.bankAccount || '--' }}</span>
          </el-form-item>
          <el-form-item label="开户地址">
            <el-input v-if="saveStatus"
                      v-model="adminForm.company.bankAddress"
                      type="textarea"
                      :maxlength="100"
                      placeholder="请输入开户地址"
                      clearable />
            <span v-else>{{ basicInfo.bankAddress || '--' }}</span>
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input v-if="saveStatus"
                      v-model="adminForm.company.address.address"
                      type="textarea"
                      :maxlength="100"
                      placeholder="请输入公司地址"
                      clearable />
            <span v-else-if="basicInfo.address">{{ basicInfo.address.address || '--' }}</span>
          </el-form-item>
          <el-form-item label="传真">
            <el-input v-if="saveStatus"
                      v-model="adminForm.company.fax"
                      :maxlength="30"
                      placeholder="请输入传真"
                      clearable />
            <span v-else>{{ basicInfo.fax || '--' }}</span>
          </el-form-item>
        </div>
      </div>
      <el-form-item v-if="!saveStatus">
        <el-button type="primary"
                   size="small"
                   @click="edit">编 辑</el-button>
      </el-form-item>
      <el-form-item v-else>
        <el-button plain
                   size="small"
                   style="border-color: var(--prev-color-primary); color: var(--prev-color-primary)"
                   @click="cancel('adminForm')">取 消</el-button>
        <el-button type="primary"
                   :loading="loading"
                   size="small"
                   @click="submitAdminForm('adminForm')">{{ loading ? "提交中 ..." : "保 存" }}</el-button>
      </el-form-item>
    </el-form>
    <el-form v-else
             ref="userForm"
             label-position="right"
             label-width="120px">
      <div class="user-info">
        <el-form-item label="公司全称">
          <span>{{ basicInfo.tenantName }}</span>
        </el-form-item>
        <el-form-item label="公司编号">
          <span>{{ basicInfo.tenantCode }}</span>
        </el-form-item>
        <el-form-item label="昵称">
          <span>{{ basicInfo.name }}</span>
        </el-form-item>
        <el-form-item label="登录账号">
          <span>{{basicInfo.userAccount + '@' + basicInfo.tenantAlias}}</span>
        </el-form-item>
        <el-form-item label="创建时间">
          <span>{{ basicInfo.createAt }}</span>
        </el-form-item>
      </div>
      <!-- <el-form-item v-if="!saveStatus">
        <el-button type="primary"
                   @click="edit">编 辑</el-button>
      </el-form-item>
      <el-form-item v-else>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary"
                   :loading="loading"
                   @click="submitUserForm()">{{ loading ? "提交中 ..." : "保 存" }}</el-button>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import { tenantPutInfo } from "@/api/modules/breadHandle";
import { tenantInfo, commonInfo } from "@/api/modules/breadHandle";
import AreaCascader from "@basic/area/AreaCascader.vue";
import platformConfig from "@/config/platformConfig";

export default {
  name: "BaseInfo",
  components: { AreaCascader },
  data () {
    return {
      saveStatus: false,
      basicCompany: {},
      adminForm: {
        company: {
          address: ''
        }
      },
      attaches: [],
      adminRules: {
        address: [{ required: true, message: '请选择所在城市', trigger: 'change' }]
      },
      userRules: {},
      loading: false,
      basicInfo: {},
      alias: null,
      code: null,
      props: {
        label: 'name',
        value: 'areaCode',
        checkStrictly: true
      },
      userInfo: sessionStorage.getItem('userInfo')
    };
  },
  computed: {
    user () {
      return JSON.parse(this.userInfo)
    },
    tenantId () {
      return this.user?.tenantId
    },
    userType () {
      return this.user?.type
    },
    openUrl () {
      return platformConfig.open[process.env.NODE_ENV] || "";
    },
    openAccount () {
      return this.user?.openAccount
    }
  },
  mounted () {
    this.userType === 1 ? this.tenantInfo() : this.commonInfo();
  },
  methods: {
    edit () {
      this.adminForm = { company: this.basicInfo }
      this.saveStatus = true;
    },
    cancel (formName) {
      if (!this.adminForm.company?.address) {
        this.userType === 1 ? this.tenantInfo() : this.commonInfo();
        this.$refs[formName].resetFields();
      }
      this.saveStatus = false;
    },
    submitAdminForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submit()
        } else {
          return false;
        }
      });
    },
    submit () {
      try {
        const { company } = this.adminForm
        tenantPutInfo(company).then((item) => {
          this.loading = true;
          this.timerLoading();
        });
      } catch (error) {
        console.log('出错了', error)
      }
    },
    timerLoading () {
      this.timer = setTimeout(() => {
        setTimeout(() => {
          this.loading = false;
          this.saveStatus = false;
        }, 400);
      }, 1500);
    },
    tenantInfo () {
      tenantInfo(this.tenantId).then((response) => {
        let { data } = response;
        this.basicInfo = { ...data.company, mobile: data.mobile, createAt: data.createAt }
        let { alias, code, ...params } = data;
        this.alias = alias;
        this.code = code;
        this.$store.commit("tenant/TENANTINFO", data);
      });
    },
    commonInfo () {
      commonInfo().then((response) => {
        let { data } = response;
        this.basicInfo = data;
      });
    },
    openPlatformBind () {
      window.open(this.openUrl, "_blank");
    },
    // selectArea (val) {
    //   // if (val.provinceCode) {
    //   //   this.adminForm.company.address = { ...this.adminForm.company.address, ...val }
    //   // } else {
    //   //   for (let key in this.adminForm.company.address) {
    //   //     if (key !== 'address') {
    //   //       this.adminForm.company.address[key] = null;
    //   //     }
    //   //   }
    //   // }
    // },
    // submitUserForm () {
    //   tenantPutInfo(this.adminForm).then((res) => {
    //     this.loading = true;
    //     this.timerLoading();
    //   });
    // },
    // uploadSuccess (value) {
    //   this.adminForm.company.logo = value[0].fileUrl;
    // }
  }
};
</script>

<style lang="scss" scoped>
.user-info {
  border-bottom: 1px dashed var(--prev-border-color-grey);
}
.user-info >>> .el-form-item__label {
  padding: 0 50px 0 0;
}
.user-form {
  display: flex;
  padding-top: 18px;
}
.user-form >>> .el-form-item__label {
  padding: 0 50px 0 0;
}
.icon-color {
  color: #67c23a !important;
}
.user-form >>> .el-input {
  width: 260px;
}
.el-form-item {
  margin-bottom: 18px;
}
/deep/ .el-form-item__label {
  line-height: 36px;
  color: #000;
  text-align: center;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
.tips_sty {
  color: var(--prev-color-text-purered);
  font-size: 12px;
}
.primary_color {
  margin-left: 10px;
  color: var(--prev-color-primary);
  cursor: pointer;
}
</style>
